@use './variables.scss' as *;
#app {
	.main-container {
		position: relative;
		min-height: 100%;
		margin-left: $sideBarWidth;
		transition: margin-left 0.28s;
	}
	.sidebar-container {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		width: $sideBarWidth;
		height: 100%;
		overflow: hidden;
		font-size: 0;
		background-color: $menuBg;
		border-right: 1px solid #f2f3f5;
		transition: width 0.28s;

		// reset element-ui css
		.horizontal-collapse-transition {
			transition:
				0s width ease-in-out,
				0s padding-left ease-in-out,
				0s padding-right ease-in-out;
		}
		.scrollbar-wrapper {
			overflow-x: hidden;
		}
		.el-scrollbar__bar.is-vertical {
			right: 0;
		}
		.el-scrollbar {
			height: 100%;
		}
		&.has-logo {
			.el-scrollbar {
				height: calc(100% - 50px);
			}
		}
		.is-horizontal {
			display: none;
		}
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			overflow: hidden;
		}
		.svg-icon {
			margin-right: 16px;
		}
		.sub-el-icon {
			margin-right: 12px;
			margin-left: -2px;
		}
		.el-menu {
			width: 100%;
			height: 100%;
			border: none;
		}

		// menu hover
		.submenu-title-noDropdown,
		.el-sub-menu__title {
			&:hover {
				background-color: $menuHover !important;
			}
		}
		.el-menu-item.is-active {
			// color: $menuActiveText !important;
			// color: rgb(64 158 255) !important;
			color: #2668ff !important;
			background-color: $subMenuHover !important;
		}
		.el-menu-item {
			width: 100%;
			color: $menuText !important;
			background-color: $menuBg;
		}
		.el-sub-menu__title {
			color: $menuText !important;
			background-color: $menuBg;
		}
		& .nest-menu .el-submenu > .el-sub-menu__title,
		& .el-submenu .el-menu-item {
			min-width: $sideBarWidth !important;

			// background-color: $subMenuBg !important;
			background-color: $subMenuBg;
			&:hover {
				background-color: $subMenuHover !important;
			}
		}
	}
	.is-active {
		.el-sub-menu__title svg {
			color: currentColor !important;
		}
	}
	.is-active > .el-sub-menu__title {
		color: $subMenuActiveText !important;
	}
	.hideSidebar {
		.sidebar-container {
			width: 54px !important;
		}
		.main-container {
			margin-left: 54px;
		}
		.submenu-title-noDropdown {
			position: relative;
			padding: 0 !important;
			& > span {
				display: inline-block;
				width: 0;
				height: 0;
				overflow: hidden;
				visibility: hidden;
			}
		}
		.el-submenu {
			overflow: hidden;
			& > .el-sub-menu__title {
				padding: 0 !important;
				.svg-icon {
					margin-left: 20px;
				}
				.sub-el-icon {
					margin-left: 19px;
				}
				.el-submenu__icon-arrow {
					display: none;
				}
			}
			.el-sub-menu__title {
				display: flex;
				align-items: center;
				justify-content: center;
				& > i,
				& > svg {
					padding: 0 !important;
					margin: 0 !important;
				}
				& > span {
					display: none;
				}
			}
		}
		.el-menu--collapse {
			.el-submenu {
				& > .el-sub-menu__title div {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					.sub-el-icon {
						margin: 0;
					}
					& > span {
						display: inline-block;
						width: 0;
						height: 0;
						overflow: hidden;
						visibility: hidden;
					}
				}
			}
		}
		.el-sub-menu {
			overflow: hidden;
			& > .el-sub-menu__title {
				display: flex;
				justify-content: center;
				padding: 0 !important;
				.svg-icon {
					// margin-left: 19px;
					margin: 0;
				}
				.el-sub-menu__icon-arrow {
					display: none;
				}
			}
		}
		.el-sub-menu__title {
			& > i {
				display: none;
			}
			& > span {
				display: none;
			}
		}
		.el-menu {
			.el-menu-item {
				display: flex;
				align-items: center;
				justify-content: center;
				& > svg {
					padding: 0 !important;
					margin: 0 !important;
				}
				& > span {
					display: none;
				}
			}
		}
	}
	.el-menu--collapse .el-menu .el-submenu {
		min-width: $sideBarWidth !important;
	}

	// mobile responsive
	.mobile {
		.main-container {
			margin-left: 0;
		}
		.sidebar-container {
			width: $sideBarWidth !important;
			transition: transform 0.28s;
		}
		&.hideSidebar {
			.sidebar-container {
				pointer-events: none;
				transition-duration: 0.3s;
				transform: translate3d(-$sideBarWidth, 0, 0);
			}
		}
	}
	.withoutAnimation {
		.main-container,
		.sidebar-container {
			transition: none;
		}
	}
}

// when menu collapsed
.el-menu--vertical {
	& > .el-menu {
		.svg-icon {
			margin-right: 16px;
		}
		.sub-el-icon {
			margin-right: 12px;
			margin-left: -2px;
		}
	}
	.nest-menu .el-submenu > .el-sub-menu__title,
	.el-menu-item {
		&:hover {
			// you can use $subMenuHover
			background-color: $menuHover !important;
		}
	}

	// the scroll bar appears when the subMenu is too long
	> .el-menu--popup {
		max-height: 100vh;
		overflow-y: auto;
		&::-webkit-scrollbar-track-piece {
			background: #d3dce6;
		}
		&::-webkit-scrollbar {
			width: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background: #99a9bf;
			border-radius: 20px;
		}
	}
}
.el-menu.el-menu--popup {
	background-color: $menuBg;
	.el-menu-item {
		color: $menuText !important;
	}
	.el-menu-item.is-active {
		// color: $menuActiveText !important;
		color: rgb(64 158 255) !important;
	}
}
